<template>
<div class="public-common">
    <div class="public-title">车辆信息列表</div>
    <div class="public-searchbox">
        <el-row>
            <el-col :span="6">
                <el-input placeholder="请输入内容" v-model="form.test" class="input-with-select"  size="mini" />
            </el-col>
            <el-col :span="18">
                <el-button type="primary" icon="el-icon-search" size="mini"  style="margin-left:10px;">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="form.isVisible = true">高级查询</el-button>
            </el-col>
        </el-row>
    </div>
    <el-scrollbar class="public-scroll">
        <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
            <el-table-column
                label="车牌号" fixed="left">
                <template slot-scope="scope">
                    {{scope.row.companyName}}
                </template>
            </el-table-column>
            <el-table-column
                label="承包人">
                <template slot-scope="scope">
                    {{scope.row.carId}}
                </template>
            </el-table-column>                
            <el-table-column
                label="隶属单位">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="原车牌号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="计价器编号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="计价器类型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="车辆来源">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="出厂日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="颜色">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="发动机号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="车身编号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="车型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="性质">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="中标日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="中标书号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="有偿票号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="上户日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="挂牌日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="开业日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="经营期限开始">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="经营期限结束">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="行驶证发证日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="行驶证过期时间">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="经营权证号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="道路运输证号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="车辆状态">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="更新状态">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="销户日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                </template>
            </el-table-column> 
            
        </el-table>
    </el-scrollbar>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.now"
    :page-sizes="page.sizes"
    :page-size="page.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total" style="margin-top:10px;">
    </el-pagination>
    
        <!--dialog-->
        <el-dialog :visible.sync="dialog.isVisible" width="650px">
            <div class="dialog-navtab">
                <div v-for="(name,index) in dialog.navtab.arr" :key="index" :class="index==dialog.navtab.currIndex?'dialog-navactive':''" @click="dialogNav(index)">
                    {{name}}
                </div>
            </div>
            <el-scrollbar style="height:350px;">
            <template v-if="dialog.navtab.currIndex == 0">
                <el-form disabled :model="dialog" label-width="130px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车牌号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车辆照片">
                                <div style="position:relative;">
                                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569325300222&di=5e3b66094fd9f2e9b686fc42261012d7&imgtype=jpg&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170323%2F0f6d86b7a989434ca7843cc97268a440_th.jpeg" alt="" style="width:160px;height:110px;position: absolute;left:0;top:5px;">
                                </div>
                                
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="承包人">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="隶属单位">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="所属企业">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="原车牌号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车辆来源">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车型">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="计价器类型">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="颜色">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="计价器编号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性质">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出厂日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="中标书号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="发动机号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="中标日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车身编号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上户日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="有偿票号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开业日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="经营期限开始时间">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="经营期限结束时间">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="挂牌日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="行驶证过期时间">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="行驶证发证日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="经营权证号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="销户日期">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="道路运输证号">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车辆状态">
                                <el-input v-model="dialog.carid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                </template>
                <template v-else>
                    <el-form label-width="90px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="车辆照片">
                                    <el-upload
                                    class="upload-demo"
                                    action="#"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    list-type="picture" :auto-upload="false">
                                    <el-button size="mini" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="行驶证">
                                    <el-upload
                                    class="upload-demo"
                                    action="#"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    list-type="picture" :auto-upload="false">
                                    <el-button size="mini" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="经营权证">
                                    <el-upload
                                    class="upload-demo"
                                    action="#"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    list-type="picture" :auto-upload="false">
                                    <el-button size="mini" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="道路运输证">
                                    <el-upload
                                    class="upload-demo"
                                    action="#"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    list-type="picture" :auto-upload="false">
                                    <el-button size="mini" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item label="购置附加税号" label-width="110px">
                                   <el-input v-model="dialog.carid" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-scrollbar>
            <div class="textcenter" style="padding-top:10px;">
                <el-button size="mini" type="success" v-if="dialog.navtab.currIndex == 1">保存扩展信息</el-button>
                <el-button size="mini" type="info" @click="dialog.isVisible = false">返回</el-button>
            </div>            
        </el-dialog>

        <!--高级查询-->
    <el-dialog title="高级查询" :visible.sync="form.isVisible" width="400px">
        <el-form :model="form" label-width="120px" size="mini">
            <el-form-item label="车牌号">
                <el-input v-model="form.carid"></el-input>
            </el-form-item>
            <el-form-item label="所属企业名称">
                <el-input v-model="form.carid"></el-input>
            </el-form-item>
            <el-form-item label="承包人">
                <el-input v-model="form.carid"></el-input>
            </el-form-item>
            <el-form-item label="经营权证号">
                <el-input v-model="form.carid"></el-input>
            </el-form-item>
            <el-form-item label="道路运输证号">
                <el-input v-model="form.carid"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button type="warning">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>
<script>
export default {
    data(){
        return {
            form:{
                test:'',
                carid:'',
                isVisible:false
            },
            tabledata:[],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            dialog:{
                isVisible:false,
                carid:'',
                navtab:{
                    arr:['车辆基本信息','车辆扩展信息'],
                    currIndex:0
                },
            }
        }
    },
    mounted(){
        
    },
    methods:{
        dialogNav(index){
            this.dialog.navtab.currIndex = index;
        },
        search(){
            alert("search")
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }

    }
}
</script>
<style lang="scss">
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;padding:0 10px;margin-bottom:20px;color: $Color}
}
</style>